<template>
  <div class="sku-form">
    <div v-if="!multipleSpec">
      <el-form ref="form" :model="goodsSkuOne" :rules="rules" label-width="200px">
        <el-form-item label="市场价(元)">
          <el-input-number
            size="mini"
            v-model="goodsSkuOne.marketPrice"
            :precision="2"
            :step="0.1"
            :min="0"
            :max="99999999"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="销售价-Android(元)">
          <el-input-number
            size="mini"
            v-model="goodsSkuOne.androidSalesPrice"
            :precision="2"
            :step="0.1"
            :min="0"
            :max="99999999"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="销售价-IOS(元)">
          <el-input-number
            size="mini"
            v-model="goodsSkuOne.iosSalesPrice"
            :precision="2"
            :step="0.1"
            :min="0"
            :max="99999999"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="销售价-TOB(元)">
          <el-input-number
            size="mini"
            v-model="goodsSkuOne.tobSalesPrice"
            :precision="2"
            :step="0.1"
            :min="0"
            :max="99999999"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="库存">
          <el-input-number
            size="mini"
            v-model="goodsSkuOne.stock"
            :precision="0"
            :step="1"
            :min="0"
            :max="99999999"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="最大购买数">
          <el-input-number
            size="mini"
            v-model="goodsSkuOne.maxPurchaseNum"
            :precision="0"
            :step="1"
            :min="1"
            :max="99"
          ></el-input-number>
        </el-form-item>

        <el-form-item label=" 服务周期(月)">
          <el-input-number
            size="mini"
            v-model="goodsSkuOne.serviceTime"
            :precision="0"
            :step="1"
            :min="1"
            :max="99"
          ></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <el-tabs type="border-card">
        <el-tab-pane label="商品规格">
          <div
            v-if="goodsSpuSpec == null || goodsSpuSpec.length <= 0"
            class="el-table__empty-block"
          >
            <span class="el-table__empty-text">暂无数据</span>
          </div>
          <div
            class="box-card el-card"
            style="margin-bottom: 5px"
            v-for="(item, index) in goodsSpuSpec"
            :key="item.id"
          >
            <div class="el-card__header" style="padding: 5px 20px">
              <div class="clearfix">
                <span>{{ item.value }}</span>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="delGoodsSpuSpec(index)"
                  :disabled="skuType"
                >移除</el-button>
              </div>
            </div>
            <div class="el-card__body" style="padding: 5px 20px">
              <el-tag
                v-for="(item2, index2) in item.leaf"
                :key="item2.id"
                type="info"
                size="small"
                closable
                @close="delGoodsSpuSpecValue(index, index2)"
              >{{ item2.value }}</el-tag>
              <br>
              <el-popover
                placement="bottom"
                width="200"
                trigger="click"
                ref="specValuePopover"
                v-model="specValuePopoverShow"
              >
                <el-select
                  v-model="goodsSpecValueAdd"
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请输入规格值"
                  @change="goodsSpecValueChange"
                  :popperAppendToBody="false"
                >
                  <el-option
                    v-for="item in goodsSpecValue"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
                <el-button
                  slot="reference"
                  type="text"
                  :disabled="skuType"
                  @click="addSpecValue(item.id)"
                  style="margin-left: 5px"
                >添加规格值</el-button>
              </el-popover>
            </div>
          </div>
          <div style="text-align: center">
            <el-popover placement="bottom" width="200" trigger="hover" ref="specPopover" @show="addSpec">
              <el-select
                v-model="goodsSpecAdd"
                filterable
                allow-create
                default-first-option
                placeholder="请输入规格"
                @change="goodsSpecChange"
                :popperAppendToBody="false"
              >
                <el-option
                  v-for="item in goodsSpec"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
              <el-button slot="reference" type="text" :disabled="skuType">添加规格</el-button>
            </el-popover>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-tabs type="border-card" style="margin-top: 5px">
        <el-tab-pane label="商品SKU">
          <SkuTable
            :specData="goodsSpuSpecFilter"
            :goodsSku="goodsSku"
            :form="form"
            :skuTableType="skuType"
            v-if="goodsSpuSpec"
            @getGoodsSku="getGoodsSku"
          ></SkuTable>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import SkuTable from "@/components/sku/sku-table.vue";

import { specValueList } from "@/api/shop/spec/specValue";

export default {
  components: {
    SkuTable
  },
  props: {
    form: {
      type: Object
    },
    goodsSpec: {
      type: Array
    },
    goodsSpuSpec: {
      type: Array
    },
    goodsSku: {
      type: Array
    },
    multipleSpec: {
      type: Boolean
    },
    skuType: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      specValuePopoverShow: false
    };
  },
  created() {
    // 初始化时，新建的商品goodsSku是空数组，编辑商品时，goodsSku需要通过接口获取，会有执行顺序问题，因此需要在watch中监视goodsSku变化。
    if (this.goodsSku.length > 0) {
      this.goodsSkuOne = this.goodsSku[0];
      //this.goodsSkuOne.enable = "1";
    } else {
      this.goodsSkuOne = {
        salesPrice: 0,
        marketPrice: 0,
        costPrice: 0,
        stock: 0,
        enable: "1",
        maxPurchaseNum: 1,
        androidSalesPrice: 0,
        iosSalesPrice: 0,
        tobSalesPrice: 0,
        serviceTime: 1
      };
    }
  },
  computed: {
    // 过滤掉属性名和属性值为空的数据规格项目
    goodsSpuSpecFilter() {
      return this.goodsSpuSpec.filter(
        item => item.value && item.leaf != null && item.leaf.length
      );
    }
  },
  watch: {
    form(val, oldVal) {
      if (val) {
      }
    },
    goodsSkuOne: {
      deep: true,
      immediate: true,
      handler(newSkus, oldSkus) {
        this.$emit("getGoodsSku", [newSkus]);
      }
    },
    multipleSpec: {
      handler(val) {
        console.log(val)
        // radio切换到多规格时，会把getGoodsSku emit一个新的值。所以切换回单规格时，要重新emit一下单规格的getGoodsSku
        if (val == "0") {
          this.$emit("getGoodsSku", [this.goodsSkuOne]);
        }
      }
    },
    goodsSku: {
      deep: true,
      immediate: true,
      handler(val) {
        if (!this.isInitGoodsSku && val && val.length > 0) {
          this.goodsSkuOne = this.goodsSku[0];
          //this.goodsSkuOne.enable = "1";
          this.isInitGoodsSku = true;
        }
      }
    }
  },
  data() {
    return {
      goodsSpecAdd: null,
      goodsSpecValueAdd: null,
      goodsSpecValue: null,
      goodsSpuSpecIndex: null,
      goodsSkuOne: null,
      rules: {},
      isInitGoodsSku: false
    };
  },
  methods: {
    getGoodsSku(val) {
      this.$emit("getGoodsSku", val, this.goodsSpuSpec);
    },
    delGoodsSpuSpecValue(indexSpec, indexSpecValue) {
      this.goodsSpuSpec[indexSpec].leaf.splice(indexSpecValue, 1);
    },
    delGoodsSpuSpec(index) {
      let id = this.goodsSpuSpec[index].id;
      this.goodsSpuSpec.splice(index, 1);
      let that = this;
      if (this.goodsSpuSpec.length == 0) {
        that.goodsSpec.forEach(function(val, index) {
          that.$set(val, "disabled", false);
        });
        return;
      }

      that.goodsSpec.forEach(function(val, index) {
        if (val.id == id) {
          that.$set(val, "disabled", false);
        }
      });
    },
    addSpecValue(specId) {
      specValueList({
        specId: specId
      }).then(reset => {
        this.goodsSpecValue = reset.data;

        this.goodsSpuSpec.forEach((val, index) => {
          if (val.id == specId) {
            this.goodsSpuSpecIndex = index;
            this.goodsSpecValue.forEach((val2, index2) => {
              val.leaf.forEach((val3, index3) => {
                if (val2.id == val3.id) {
                  this.$set(val2, "disabled", true);
                }
              });
            });
          }
        });
      });
    },
    goodsSpecValueChange(id) {
      //this.$refs.specValuePopover.doClose();
      this.specValuePopoverShow = false;
      this.goodsSpecValueAdd = null;
      let that = this;
      let isNew = true;
      this.goodsSpecValue.forEach(function(val, index) {
        if (val.id == id) {
          isNew = false;
          that.$set(val, "disabled", true);
          that.goodsSpuSpec[that.goodsSpuSpecIndex].leaf.push({
            id: val.id,
            value: val.name
          });
        }
      });
      if (isNew) {
        //需新增
        addSpecValue({
          specId: this.goodsSpuSpec[this.goodsSpuSpecIndex].id,
          name: id
        }).then(data => {
          this.goodsSpecValue.push({
            id: data.data.data.id,
            name: data.data.data.name,
            disabled: true
          });
          that.goodsSpuSpec[that.goodsSpuSpecIndex].leaf.push({
            id: data.data.data.id,
            value: data.data.data.name
          });
        });
      }
    },
    goodsSpecChange(id) {
      //this.$refs.specPopover.doClose();
      this.goodsSpecAdd = null;
      let that = this;
      let isNew = true;
      this.goodsSpec.forEach(function(val, index) {
        if (val.id == id) {
          isNew = false;
          that.$set(val, "disabled", true);
          that.goodsSpuSpec.push({
            id: val.id,
            value: val.name,
            leaf: []
          });
        }
      });
      if (isNew) {
        //需新增
        addSpec({
          name: id
        }).then(data => {
          this.goodsSpec.push({
            id: data.data.data.id,
            name: data.data.data.name,
            disabled: true
          });
          this.goodsSpuSpec.push({
            id: data.data.data.id,
            value: data.data.data.name,
            leaf: []
          });
        });
      }
      // 选择一个之后全部置灰
      that.goodsSpec.forEach(function(val, index) {
        that.$set(val, "disabled", true);
      });
    },
    addSpec() {
      let that = this;
      if (this.goodsSpuSpec.length > 0) {
        that.$modal.msgError("商品只能选择1个规格！");
        that.goodsSpec.forEach(function(val, index) {
          that.$set(val, "disabled", true);
        });
        return;
      }

      that.goodsSpec.forEach(function(val, index) {
        that.goodsSpuSpec.forEach(function(val2, index2) {
          if (val.id == val2.id) {
            that.$set(val, "disabled", true);
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.sku-form .el-tag + .el-tag {
  margin-left: 10px;
}
</style>
